<template>
  <v-container fluid fill-height class="statistics-wrapper">
    <v-layout row wrap>
      <v-flex md12>
        <v-tabs v-model="tabs" fixed-tabs color="transparent" slot="extension" @input="getGameClicked">
          <v-tabs-slider color="primary"></v-tabs-slider>
          <v-tab v-for="(item, index) in toggleItems" :key="index" :href="`#${item.value}`" class="primary--text">
            <span class="title">{{ item.text }}</span>
          </v-tab>
        </v-tabs>
      </v-flex>
      <v-flex md12>
        <v-layout row wrap>
          <v-flex :md3="tabs == 0" :md4="tabs != 0" sm12 class="px-2 mt-2" @click="daily">
            <v-card color="white" class="cursor">
              <v-card-title class="title card-title-bg" :class="{'card-title-selected white--text': toggleCard === 1}">
                <v-icon>today</v-icon>
                <span class="mx-2">日统计</span>
              </v-card-title>
              <v-divider></v-divider>
              <v-card-text class="body-2">
                <v-layout wrap row class="left-border-red subheading">
                  <v-flex md6>今日新增: {{statistics.todayNew}}</v-flex>
                  <v-flex md6>昨日新增: {{statistics.yesterdayNew}}</v-flex>
                </v-layout>
                <v-layout wrap row class="left-border-red subheading">
                  <v-flex md6>今日活跃: {{statistics.todayActive}}</v-flex>
                  <v-flex md6>昨日活跃: {{statistics.yesterdayActive}}</v-flex>
                </v-layout>
              </v-card-text>
            </v-card>
          </v-flex>
          <v-flex :md3="tabs == 0" :md4="tabs != 0" sm12 class="px-2 mt-2" @click="weekly">
            <v-card color="white" class="cursor">
              <v-card-title class="title card-title-bg" :class="{'card-title-selected white--text': toggleCard === 2}">
                <v-icon>event_note</v-icon>
                <span class="mx-2">周统计</span>
              </v-card-title>
              <v-divider></v-divider>
              <v-card-text class="body-2">
                <v-layout wrap row class="left-border-indigo subheading">
                  <v-flex md6>本周新增: {{statistics.weekNew}}</v-flex>
                  <v-flex md6>上周新增: {{statistics.lastWeekNew}}</v-flex>
                </v-layout>
                <v-layout wrap row class="left-border-indigo subheading">
                  <v-flex md6>本周活跃: {{statistics.weekActive}}</v-flex>
                  <v-flex md6>上周活跃: {{statistics.lastWeekActive}}</v-flex>
                </v-layout>
              </v-card-text>
            </v-card>
          </v-flex>
          <v-flex :md3="tabs == 0" :md4="tabs != 0" sm12 class="px-2 mt-2" @click="monthly">
            <v-card color="white" class="cursor">
              <v-card-title class="title card-title-bg" :class="{'card-title-selected white--text': toggleCard === 3}">
                <v-icon>date_range</v-icon>
                <span class="mx-2">月统计</span>
              </v-card-title>
              <v-divider></v-divider>
              <v-card-text class="body-2">
                <v-layout wrap row class="left-border-green subheading">
                  <v-flex md6>本月新增: {{statistics.monthNew}}</v-flex>
                  <v-flex md6>上月新增: {{statistics.lastMonthNew}}</v-flex>
                </v-layout>
                <v-layout wrap row class="left-border-green subheading">
                  <v-flex md6>本月活跃: {{statistics.monthActive}}</v-flex>
                  <v-flex md6>上月活跃: {{statistics.lastMonthActive}}</v-flex>
                </v-layout>
              </v-card-text>
            </v-card>
          </v-flex>
          <v-flex md3 sm12 class="px-2 mt-2" v-if="tabs == 0">
            <v-card color="white" class="cursor">
              <v-card-title class="title card-title-bg">
                <v-icon>date_range</v-icon>
                <span class="mx-2">总统计</span>
              </v-card-title>
              <v-divider></v-divider>
              <v-card-text class="body-2">
                <v-layout wrap row class="left-border-purple subheading">
                  <v-flex md6>总计用户数: {{statistics.totalUser}}</v-flex>
                </v-layout>
                <v-layout wrap row class="left-border-purple subheading">
                  <v-flex md6 class="white--text">.</v-flex>
                </v-layout>
              </v-card-text>
            </v-card>
          </v-flex>
        </v-layout>
      </v-flex>
      <v-flex md12 class="mt-2">
        <v-layout row wrap>
          <v-flex md12>
            <!-- 各项曲线图 -->
            <div id="echart1" style="width: 1680px;height:280px;">
            </div>
          </v-flex>
          <v-flex md12>
            <div id="echart2" style="width: 1680px;height:280px;">
            </div>
          </v-flex>
        </v-layout>
      </v-flex>
      <v-flex>
        <v-layout md12 row>

          <v-flex md5>
            <v-layout row>
              <v-flex md3 class="px-2">
                <v-card color="white">
                  <v-card-title class="subheading card-title-bg">
                    <span class="mx-2">日留存</span>
                  </v-card-title>
                  <v-divider></v-divider>
                  <v-card-text>
                    <v-layout md12 wrap row class="subheading">
                      <v-flex md4 class="display-2 red--text">{{(statistics.dayRemain*100||0).toFixed(0)}}<span class="display-1">%</span></v-flex>
                    </v-layout>
                  </v-card-text>
                </v-card>
              </v-flex>
              <v-flex md3 class="px-2">
                <v-card color="white">
                  <v-card-title class="subheading card-title-bg">
                    <span class="mx-2">七日留存</span>
                  </v-card-title>
                  <v-divider></v-divider>
                  <v-card-text>
                    <v-layout md12 wrap row class="subheading">
                      <v-flex md4 class="display-2 amber--text">{{(statistics.weekRemain*100||0).toFixed(0)}}<span class="display-1">%</span></v-flex>
                    </v-layout>
                  </v-card-text>
                </v-card>
              </v-flex>
              <v-flex md3 class="px-2">
                <v-card color="white">
                  <v-card-title class="subheading card-title-bg">
                    <span class="ml-2">三十日留存</span>
                  </v-card-title>
                  <v-divider></v-divider>
                  <v-card-text>
                    <v-layout md12 wrap row class="subheading">
                      <v-flex md4 class="display-2 cyan--text">{{(statistics.monthRemain*100||0).toFixed(0)}}<span class="display-1">%</span></v-flex>
                    </v-layout>
                  </v-card-text>
                </v-card>
              </v-flex>
              <v-flex md3 class="px-2">
                <v-card color="white">
                  <v-card-title class="subheading card-title-bg">
                    <span class="mx-2">用户黏度</span>
                  </v-card-title>
                  <v-divider></v-divider>
                  <v-card-text>
                    <v-layout md12 wrap row class="subheading">
                      <v-flex md4 class="display-2 blue--text">{{(statistics.monthDM*100||0).toFixed(0)}}<span class="display-1">%</span></v-flex>
                    </v-layout>
                  </v-card-text>
                </v-card>
              </v-flex>
            </v-layout>
          </v-flex>

          <v-flex md7 class="px-2" v-if="tabs === '0'">
            <v-card color="white">
              <v-card-title class="title card-title-bg">
                <v-icon>today</v-icon>
                <!-- 昨日用户构成 -->
                <span class="mx-2">{{userCard}}</span>
              </v-card-title>
              <v-divider></v-divider>
              <v-card-text class="subheading">
                <v-layout nowrap row class="left-border-red" justify-space-between>
                  <v-flex md1>经典斗牛: <br/>{{`${toFixed((userCos['1'] / userCos['0'] * 100))}%`}}</v-flex>
                  <v-flex md1>斗公牛:<br/>{{`${toFixed((userCos['2'] / userCos['0'] * 100))}%`}}</v-flex>
                  <v-flex md1>点子牛:<br/>{{`${toFixed((userCos['4'] / userCos['0'] * 100))}%`}}</v-flex>
                  <v-flex md1>跑得快:<br/>{{`${toFixed((userCos['8'] / userCos['0'] * 100))}%`}}</v-flex>
                  <v-flex md1>欢乐金花:<br/>{{`${toFixed((userCos['5'] / userCos['0'] * 100))}%`}}</v-flex>
                  <v-flex md1>红中麻将:<br/>{{`${toFixed((userCos['3'] / userCos['0'] * 100))}%`}}</v-flex>
                  <v-flex md1>平江扎鸟:<br/>{{`${toFixed((userCos['11'] / userCos['0'] * 100))}%`}}</v-flex>
                  <v-flex md1>长沙麻将:<br/>{{`${toFixed((userCos['10'] / userCos['0'] * 100))}%`}}</v-flex>
                  <v-flex md1>三公:<br/>{{`${toFixed((userCos['6'] / userCos['0'] * 100))}%`}}</v-flex>
                </v-layout>
              </v-card-text>
            </v-card>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
const GAME_NAME = {
  "1": "经典斗牛",
  "2": "斗公牛",
  "3": "红中麻将",
  "4": "点子牛",
  "5": "欢乐金花",
  "6": "三公",
  "7": "平江开船",
  "8": "跑得快",
  "10": "长沙麻将",
  "11": "平江扎鸟"
};
const WEEK = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];

import echarts from "echarts";
import { mapMutations } from "vuex";
import * as statistics from "../../api/statistics";
export default {
  data: () => ({
    tabs: null,
    btnToggle: null,
    showProgress: false,
    dialog: false,
    modal: false,
    modalText: "",
    cardTitle: "日统计",
    toggleCard: 1,
    userCard: "昨日活跃用户构成",
    userCos: {},
    toggleItems: [
      {
        text: "总数据统计",
        value: 0,
        gameId: "ALL",
        url: ""
      },
      {
        text: "经典斗牛",
        value: 1,
        gameId: "BULLFIGHT",
        url: "classic-bull.png"
      },
      { text: "斗公牛", value: 2, gameId: "OXFIGHT", url: "fight-bull.png" },
      { text: "点子牛", value: 5, gameId: "DIANZINIU", url: "dianzi-bull.png" },

      { text: "跑得快", value: 8, gameId: "RUNFAST", url: "runfast.png" },
      { text: "欢乐金花", value: 4, gameId: "JINHUA", url: "jinhua.png" },
      {
        text: "红中麻将",
        value: 3,
        gameId: "HONGZHONG",
        url: "hz-majiang.png"
      },
      {
        text: "平江扎鸟",
        value: 11,
        gameId: "PJMAHJONG",
        url: "pj-majiang.png"
      },
      {
        text: "长沙麻将",
        value: 10,
        gameId: "CSMAHJONG",
        url: "cs-majiang.png"
      },
      { text: "三公", value: 6, gameId: "SANGONG", url: "sangong.png" }
    ],
    statistics: {
      todayNew: 0,
      todayActive: 0,
      yesterdayNew: 0,
      yesterdayActive: 0,
      dayRemain: 0,
      sevenRemain: 0,

      weekNew: 0,
      weekActive: 0,
      lastWeekNew: 0,
      lastWeekActive: 0,
      weekRemain: 0,

      monthNew: 0,
      monthActive: 0,
      lastMonthNew: 0,
      lastMonthActive: 0,
      monthRemain: 0,
      monthDM: 0,
      totalUser: 0
    },
    tableData: [],
    gameTableData: [],
    headers: [
      { text: "游戏", value: "game", align: "center", sortable: false },
      {
        text: "经典斗牛",
        value: "BULLFIGHT",
        align: "center",
        sortable: false
      },
      { text: "斗公牛", value: "OXFIGHT", align: "center", sortable: false },
      { text: "点子牛", value: "DIANZINIU", align: "center", sortable: false },
      { text: "跑得快", value: "RUNFAST", align: "center", sortable: false },
      { text: "欢乐金花", value: "JINHUA", align: "center", sortable: false },
      {
        text: "红中麻将",
        value: "HONGZHONG",
        align: "center",
        sortable: false
      },
      {
        text: "平江扎鸟",
        value: "PJMAHJONG",
        align: "center",
        sortable: false
      },
      {
        text: "长沙麻将",
        value: "CSMAHJONG",
        align: "center",
        sortable: false
      },
      { text: "三公", value: "SANGONG", align: "center", sortable: false }
    ],
    chart1: null,
    chart2: null,
    option1: null,
    option2: null,
    chips: [],
    dataChips: {
      daily: [
        {
          title: "次日留存",
          value: "89%"
        },
        {
          title: "七日留存",
          value: "78%"
        }
      ],
      weekly: [
        {
          title: "周留存",
          value: "87%"
        },
        {
          title: "DAU/MAU",
          value: "84%"
        }
      ],
      monthly: [
        {
          title: "月留存",
          value: "80%"
        },
        {
          title: "DAU/MAU",
          value: "71%"
        }
      ]
    },
    dayData: {},
    currentCard: 1
  }),
  mounted() {
    // 获取到对应的游戏类型
    // this.initialize();
    // 注释掉
    this.chart1 = echarts.init(document.getElementById("echart1"));
    this.chart2 = echarts.init(document.getElementById("echart2"));
    this.option1 = {
      title: {
        text: "今日统计",
        textStyle: {
          fontWeight: "normal",
          fontSize: "18"
        }
      },
      color: ["#f44336", "#009688"],
      grid: {
        left: "4%",
        right: "8%",
        top: "14%"
      },
      tooltip: {
        trigger: "axis",
        confine: true,
        formatter: function(params) {
          let p1 = params[0];
          p1.value[1] = p1.value[1] || "暂无数据";
          if (params.length === 2) {
            let p2 = params[1];
            p2.value[1] = p2.value[1] || "暂无数据";
            return `${p1.seriesName}: ${p1.value[1]} <br />  ${
              p2.seriesName
            }: ${p2.value[1]}`;
          } else {
            return `${p1.seriesName}: ${p1.value[1]}`;
          }
        },
        backgroundColor: "#333",
        extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
        axisPointer: {
          animation: false
        }
      },
      axisPointer: {
        animation: false
      },
      legend: {
        data: ["今日活跃", "今日新增"]
      },
      xAxis: {
        type: "time",
        minInterval: 1,
        splitNumber: 24,
        splitLine: {
          show: false
        },
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          formatter(params) {
            let h = new Date(params).getHours();
            h = h > 9 ? h : "0" + h;
            return `${h}:00`;
          }
        }
      },
      yAxis: {
        type: "value",
        boundaryGap: [0, "100%"],
        splitLine: {
          show: true
        },
        max: function(value) {
          return value.max + 100;
        }
      }
    };
    this.option2 = {
      title: {
        text: "昨日统计",
        textStyle: {
          fontWeight: "normal",
          fontSize: "18"
        }
      },
      color: ["#f44336", "#009688"],
      grid: {
        left: "4%",
        right: "8%",
        top: "14%"
      },
      tooltip: {
        trigger: "axis",
        confine: true,
        formatter: function(params) {
          let p1 = params[0];
          p1.value[1] = p1.value[1] || "暂无数据";
          if (params.length === 2) {
            let p2 = params[1];
            p2.value[1] = p2.value[1] || "暂无数据";
            return `${p1.seriesName}: ${p1.value[1]} <br />  ${
              p2.seriesName
            }: ${p2.value[1]}`;
          } else {
            return `${p1.seriesName}: ${p1.value[1]}`;
          }
        },
        backgroundColor: "#333",
        extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
        axisPointer: {
          animation: false
        }
      },
      axisPointer: {
        animation: false
      },
      xAxis: {
        type: "time",
        minInterval: 1,
        splitNumber: 24,
        splitLine: {
          show: false
        },
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          formatter(params) {
            let h = new Date(params).getHours();
            h = h > 9 ? h : "0" + h;
            return `${h}:00`;
          }
        }
      },
      yAxis: {
        type: "value",
        boundaryGap: [0, "100%"],
        splitLine: {
          show: true
        },
        max: function(value) {
          return value.max + 100;
        }
      }
    };
    this.chart1.setOption(this.option1);
    this.chart2.setOption(this.option2);

    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.getUserdata();
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
        this.getUserdata();
      });
    });
  },
  watch: {
    // 监测路由参数变化
    $route(to, from) {
      console.log(to.params.gametype);
    }
  },
  methods: {
    ...mapMutations(["PROGRESS"]),
    toFixed(num) {
      if (Number.isNaN(num)) return "-";
      if ((num + "").match(/\./)) {
        var numArr = (num + "").split(".");
        if (numArr[1].length > 2) {
          var num2 = +numArr[1][2] > 5 ? +numArr[1][1] + 1 : +numArr[1][1];
          return +(numArr[0] + "." + numArr[1][0] + num2);
        } else {
          return num;
        }
      } else {
        return num;
      }
    },
    // 获取统计数据
    getUserdata() {
      this.PROGRESS(true);
      statistics.getUserdata.r(this.tabs, this.toggleCard).then(({ data }) => {
        let d = data.data;
        if (data.result == 0) {
          this.statistics = d.statistics;
          this.userCos = this.convertDataGame(d.userConstitudeList);
          if (this.toggleCard === 1) {
            this.chart1.setOption({
              title: {
                text: "今日统计"
              },
              legend: {
                data: ["新增用户", "活跃用户"]
              },
              series: [
                {
                  name: "新增用户",
                  type: "line",
                  smooth: true,
                  data: this.convertDataDay(d.chartData.thisNewList)
                },
                {
                  name: "活跃用户",
                  type: "line",
                  smooth: true,
                  data: this.convertDataDay(d.chartData.thisList)
                }
              ],
              xAxis: {
                type: "time",
                minInterval: 1,
                splitNumber: 24,
                splitLine: {
                  show: false
                },
                axisLabel: {
                  formatter(params) {
                    let h = new Date(params).getHours();
                    h = h > 9 ? h : "0" + h;
                    return `${h}:00`;
                  }
                }
              }
            });
            this.chart2.setOption({
              title: {
                text: "昨日统计"
              },
              legend: {
                data: ["新增用户", "活跃用户"]
              },
              series: [
                {
                  name: "新增用户",
                  type: "line",
                  smooth: true,
                  data: this.convertDataDay(d.chartData.lastNewList)
                },
                {
                  name: "活跃用户",
                  type: "line",
                  smooth: true,
                  data: this.convertDataDay(d.chartData.lastList)
                }
              ],
              xAxis: {
                type: "time",
                minInterval: 1,
                splitNumber: 24,
                splitLine: {
                  show: false
                },
                axisLabel: {
                  formatter(params) {
                    let h = new Date(params).getHours();
                    h = h > 9 ? h : "0" + h;
                    return `${h}:00`;
                  }
                }
              }
            });
          } else if (this.toggleCard === 2) {
            this.chart1.setOption({
              title: {
                text: "本周统计"
              },
              legend: {
                data: ["新增用户", "活跃用户"]
              },
              series: [
                {
                  name: "新增用户",
                  type: "line",
                  smooth: true,
                  data: this.convertDataWeek(d.chartData.thisNewList)
                },
                {
                  name: "活跃用户",
                  type: "line",
                  smooth: true,
                  data: this.convertDataWeek(d.chartData.thisList)
                }
              ],
              xAxis: {
                type: "category",
                data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
              },
              tooltip: {
                confine: true,
                formatter: function(params) {
                  let p1 = params[0];
                  if (params.length === 2) {
                    let p2 = params[1];
                    return ` ${p1.seriesName}: ${p1.value} <br />  ${
                      p2.seriesName
                    }: ${p2.value}`;
                  } else {
                    return `${p1.seriesName}: ${p1.value}`;
                  }
                }
              }
            });
            this.chart2.setOption({
              title: {
                text: "上周统计"
              },
              legend: {
                data: ["新增用户", "活跃用户"]
              },
              series: [
                {
                  name: "新增用户",
                  type: "line",
                  smooth: true,
                  data: this.convertDataWeek(d.chartData.lastNewList)
                },
                {
                  name: "活跃用户",
                  type: "line",
                  smooth: true,
                  data: this.convertDataWeek(d.chartData.lastList)
                }
              ],
              xAxis: {
                type: "category",
                data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
              },
              tooltip: {
                confine: true,
                formatter: function(params) {
                  let p1 = params[0];
                  if (params.length === 2) {
                    let p2 = params[1];
                    return ` ${p1.seriesName}: ${p1.value} <br />  ${
                      p2.seriesName
                    }: ${p2.value}`;
                  } else {
                    return `${p1.seriesName}: ${p1.value}`;
                  }
                }
              }
            });
          } else {
            this.chart1.setOption({
              title: {
                text: "本月统计"
              },
              legend: {
                data: ["新增用户", "活跃用户"]
              },
              series: [
                {
                  name: "新增用户",
                  type: "line",
                  smooth: true,
                  data: this.convertDataMonth(d.chartData.thisNewList)
                },
                {
                  name: "活跃用户",
                  type: "line",
                  smooth: true,
                  data: this.convertDataMonth(d.chartData.thisList)
                }
              ],
              xAxis: {
                type: "category",
                boundaryGap: ["20%", "20%"],
                data: (() => {
                  let d = [];
                  for (let i = 0; i < 31; i++) {
                    d.push(`${i + 1}号`);
                  }
                  return d;
                })()
              },
              tooltip: {
                confine: true,
                formatter: function(params) {
                  let p1 = params[0];
                  if (params.length === 2) {
                    let p2 = params[1];
                    return ` ${p1.seriesName}: ${p1.value} <br />  ${
                      p2.seriesName
                    }: ${p2.value}`;
                  } else {
                    return `${p1.seriesName}: ${p1.value}`;
                  }
                }
              }
            });
            this.chart2.setOption({
              title: {
                text: "上月统计"
              },
              legend: {
                data: ["新增用户", "活跃用户"]
              },
              series: [
                {
                  name: "新增用户",
                  type: "line",
                  smooth: true,
                  data: this.convertDataMonth(d.chartData.lastNewList)
                },
                {
                  name: "活跃用户",
                  type: "line",
                  smooth: true,
                  data: this.convertDataMonth(d.chartData.lastList)
                }
              ],
              xAxis: {
                type: "category",
                data: (() => {
                  let d = [];
                  for (let i = 0; i < 31; i++) {
                    d.push(`${i + 1}号`);
                  }
                  return d;
                })()
              },
              tooltip: {
                confine: true,
                formatter: function(params) {
                  let p1 = params[0];
                  if (params.length === 2) {
                    let p2 = params[1];
                    return ` ${p1.seriesName}: ${p1.value} <br />  ${
                      p2.seriesName
                    }: ${p2.value}`;
                  } else {
                    return `${p1.seriesName}: ${p1.value}`;
                  }
                }
              }
            });
          }
        }
        this.PROGRESS(false);
      });
    },
    getGameClicked() {
      this.getUserdata();
    },
    initialize() {
      // 初始化需要获取的内容，用于刷新或者切换公众号时使用
      this.gameTableData = [
        {
          DIANZINIU: { name: "点子牛", value: 66 },
          RUNFAST: { name: "跑得快", value: 36 },
          BULLFIGHT: { name: "经典斗牛", value: 24 },
          OXFIGHT: { name: "斗公牛", value: 68 },
          PJMAHJONG: { name: "平江麻将", value: 66 },
          HONGZHONG: { name: "红中麻将", value: 26 },
          JINHUA: { name: "欢乐金花", value: 166 },
          SANGONG: { name: "三公", value: 86 },
          CSMAHJONG: { name: "长沙麻将", value: 76 }
        }
      ];
    },
    convertDataDay(data) {
      let chart = [],
        date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate();
      let dset = {};

      data.forEach(function(item) {
        dset[item.hours] = dset[item.hours] || null;
        dset[item.hours] = item.totalPrice + dset[item.hours];
      });
      for (let i = 0; i < 24; i++) {
        if (!dset[i]) {
          dset[i] = null;
        }
      }
      _.forEach(dset, (item, key) => {
        let time = (+key < 10 ? `0${key}` : key) + ":00:00";
        chart.push({
          name: time,
          value: [`${year}-${month}-${day} ${time}`, item]
        });
      });
      return chart;
    },
    // 转换chartData
    convertDataWeek(data) {
      var chart = [];
      data.forEach(function(item, index) {
        chart.push({
          name: WEEK[item.hours],
          value: item.totalPrice
        });
      });
      return chart;
    },
    // 转换chartData
    convertDataMonth(data) {
      var chart = [];
      data.forEach(function(item, index) {
        chart.push({
          name: `${item.hours}号`,
          value: [`${item.hours}号`, item.totalPrice]
        });
      });
      return chart;
    },
    convertDataGame(data) {
      if (!data) return [];
      var game = {};
      var d0 = 0;
      data.forEach(function(item) {
        d0 += item.data;
        game[item.gameId] = item.data;
      });
      game["0"] = d0;
      return game;
    },
    daily() {
      this.cardTitle = "日统计";
      this.userCard = "昨日活跃用户构成";
      this.toggleCard = 1;
      this.getUserdata();
    },
    weekly() {
      this.toggleCard = 2;
      this.userCard = "近七日活跃用户构成";
      this.cardTitle = "周统计";
      this.getUserdata();
    },
    monthly() {
      this.userCard = "近三十日活跃用户构成";
      this.cardTitle = "月统计";
      this.toggleCard = 3;
      this.getUserdata();
    }
  }
};
</script>

<style lang="less" scoped>
</style>


